<template>
	<view class="page">
		<view class="li" v-for="(item,index) in list " :key="index" @click="goDetail(item)">
			<view class="title dis aic jcsb">
				<view>商品</view>
				<view>{{item.orderStatus_dictText}}</view>
			</view>
			<view class="line"></view>
			<view class="dis jcsb" v-for="(it,ind) in item.groupGoods">
				<view class="img_box">
					<image :src="it.image" mode="aspectFit" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="mr_left24 disend">
					<view class="name">{{it.goodName}}</view>
					<view class="number">数量：x{{it.buyNum}}</view>
					<view class="number">价格：{{it.price}}</view>
				</view>
			</view>
			<view class="sum">
				<view class="price">总价:￥{{item.amount}}</view>
				<view class="btn">查看详情</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		groupOrderList
	} from '@/api.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getList() {
				let res = await groupOrderList({})
				if (res.code == 200) {
					this.list = res.result.records
				}
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/tuanGouPointsOrderDetails?orderNo=' + item.orderNo
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(245, 245, 245);
		min-height: 100vh;
		width: 750rpx;
	}

	.li {
		width: 690rpx;
		// height: 300rpx;
		background: #FFFFFF;
		margin: 0rpx auto 20rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			line-height: 44rpx;
		}

		.line {
			width: 100%;
			height: 2rpx;
			margin: 10rpx 0;
			background: #ECECEC;
		}

		.img_box {
			width: 200rpx;
			height: 200rpx;
		}

		.name {
			width: 280rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
		}

		.number {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #959595;
		}




	}

	.sum {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-top: 20rpx;

		.price {
			color: red;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
		}

		.btn {
			width: 139rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #F6D44D;
			border-radius: 129rpx 129rpx 129rpx 129rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 22rpx;
			color: #FFFFFF;
			margin: 0rpx 0 0rpx 40rpx;
		}
	}

	.mr_left24 {
		margin-left: 24rpx;
	}

	.disend {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
</style>